<template>
	<view class="warp">
		<!-- #ifdef APP-PLUS -->
		<view class="title-contents"><view class="top-view status"></view></view>
		<!-- #endif -->
		<view class="login-title">
			<view class="logo"><image src="/static/images/common/logo.png" mode=""></image></view>
		</view>
		<!-- 验证码登录 -->
		<view class="login-phone form-wapper">
			<view class="phone input-wapper">
				<view class="lside"><text class="iconfont icon-shouji"></text></view>
				<view class="mobile rside"><input placeholder-class="input-placeholder" 
				 type="number" v-model="username" placeholder="请输入手机号" /></view>
			</view>
			<view class="phone input-wapper">
				<view class="lside"><text class="iconfont icon-yanzhengma"></text></view>
				<view class="mobile rside"><input placeholder-class="input-placeholder" v-model="vercode" type="number"  placeholder="请输入验证码" /></view>

				<view >
					<u-code :seconds="seconds" ref="uCode" @change="codeChange">
					</u-code>
					<!-- <u-button  color="#fdd100"></u-button> -->
					<button @tap="getCode" type="default">{{tips}}</button>
				</view>
			</view>
		</view>

		<button type="primary" class="login-btn" @click="code">登录</button>

	</view>
</template>
<script>
import {codelogin,sendSms} from "@/api/user.js"
export default{
	data(){
		return{
			username:'',
			vercode:'',
			tips:'获取验证码',
			seconds: 20,
		}
	},
	methods:{
		codeChange(text) {
			this.tips = text;
		},
		getCode() {
			if (uni.$u.test.mobile(this.username)) {
				if(this.$refs.uCode.canGetCode){
					uni.showLoading({
						title: '正在获取验证码'
					})
					sendSms({
						mobile: this.username,
						type: "login"
					}).then((res) => {
						// console.log(res)
						console.log(res.data)
						if (res.code == 0) {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							uni.$u.toast(res.data);
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else{
							uni.$u.toast(res.msg);
						}
					})
				}else{
					uni.$u.toast('倒计时结束后再发送');
				}
				
				
			}else{
				uni.$u.toast('请输入手机号');
			}
		},
		code(){
			let {username,vercode}= this
			if(!/^1[3-9]\d{9}$/.test(username)){
				this.$toast('手机号码格式错误');
				return;
			}
			if(!/^\d{6}$/.test(vercode)){
				this.$toast('验证码格式错误');
				return;
			}
			codelogin({username,vercode}).then(res=>{
				// console.log(res)
				if (res.code==0) {
					uni.$u.toast("登录成功");
					setTimeout(()=>{
						uni.navigateBack()
					},500)
				}
			})
		}
	}
}
</script>
<style lang="scss">
@import  "login.scss"
</style>
